popupMenu: Use an image for arrows

Until now the arrows were the associated arrow
character of the font. This cause some problems like
different arrows for different fonts, and size can be
altered because of the font size.
To solve that, use an image for the arrows.

https://bugzilla.gnome.org/show_bug.cgi?id=720206

diff --git a/data/Makefile.am b/data/Makefile.am
index 4f91709d6385bb32b5d5ce08017c487b4e31495b..a73affd10c4f96f1a12c32c266e098187aacbfe5 100644 (file)
--- a/data/Makefile.am
+++ b/data/Makefile.am
@@ -39,6 +39,7 @@ dist_theme_DATA =                             \
        theme/filter-selected-rtl.svg           \
        theme/gnome-shell.css                   \
        theme/logged-in-indicator.svg           \
+       theme/menu-arrow-symbolic.svg               \
        theme/message-tray-background.png       \
        theme/more-results.svg                  \
        theme/noise-texture.png                 \

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 61a6284dd174ec0804efce880601e50d7b46cdca..4b0489011d993090bbb16fcffa79a2fe5697e36b 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -157,8 +157,9 @@ StScrollBar StButton#vhandle:active {
     min-width: 200px;
 }
 
-.unicode-arrow {
-    font-size: 120%;
+.popup-menu-arrow {
+    width: 16px;
+    height: 16px;
 }
 
 .popup-submenu-menu-item:open {

diff --git a/data/theme/menu-arrow-symbolic.svg b/data/theme/menu-arrow-symbolic.svg
new file mode 100644 (file)
index 0000000..07acaa8
--- /dev/null
+++ b/data/theme/menu-arrow-symbolic.svg
@@ -0,0 +1,90 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="16"
+   height="16"
+   id="svg3863"
+   version="1.1"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="menu-arrow.svg">
+  <defs
+     id="defs3865" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="15.836083"
+     inkscape:cx="-3.1641676"
+     inkscape:cy="11.823817"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     inkscape:grid-bbox="true"
+     inkscape:document-units="px"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:window-width="1366"
+     inkscape:window-height="702"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:snap-bbox="true">
+    <sodipodi:guide
+       orientation="1,0"
+       position="15.996443,16.922964"
+       id="guide3873" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="28.041217,3.1256134"
+       id="guide3875" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-0.80372916,24.469088"
+       id="guide3877" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="3.0363102,34.649657"
+       id="guide3879" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="29.023553,28.577037"
+       id="guide3881" />
+    <inkscape:grid
+       type="xygrid"
+       id="grid2988" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata3868">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     id="layer1"
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     transform="translate(0,-16)">
+    <path
+       style="fill:#ffffff;fill-opacity:1;stroke:none"
+       d="m 4,23 8,0 -4,5 z"
+       id="path3883"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccc" />
+  </g>
+</svg>

diff --git a/js/ui/panel.js b/js/ui/panel.js
index cfa6fdb4eb929d1428d11b7092d31cea652f5410..e7f8df92a315539b7c3fc55c4d74e8bfd5efd52d 100644 (file)
--- a/js/ui/panel.js
+++ b/js/ui/panel.js
@@ -213,7 +213,7 @@ const AppMenuButton = new Lang.Class({
         this._label = new TextShadower();
         this._label.actor.y_align = Clutter.ActorAlign.CENTER;
         this._hbox.add_actor(this._label.actor);
-        this._arrow = PopupMenu.unicodeArrow(St.Side.BOTTOM);
+        this._arrow = PopupMenu.arrowIcon(St.Side.BOTTOM);
         this._hbox.add_actor(this._arrow);
 
         this._iconBottomClip = 0;
@@ -842,7 +842,7 @@ const AggregateMenu = new Lang.Class({
         this._indicators.add_child(this._rfkill.indicators);
         this._indicators.add_child(this._volume.indicators);
         this._indicators.add_child(this._power.indicators);
-        this._indicators.add_child(PopupMenu.unicodeArrow(St.Side.BOTTOM));
+        this._indicators.add_child(PopupMenu.arrowIcon(St.Side.BOTTOM));
 
         this.menu.addMenuItem(this._volume.menu);
         this.menu.addMenuItem(this._brightness.menu);

diff --git a/js/ui/popupMenu.js b/js/ui/popupMenu.js
index b51c7c79546e1cee8842954610907df226027758..af0d9e19f40ab5bc55de65c1d5ed55813e4426f6 100644 (file)
--- a/js/ui/popupMenu.js
+++ b/js/ui/popupMenu.js
@@ -45,28 +45,35 @@ function isPopupMenuItemVisible(child) {
 /**
  * @side Side to which the arrow points.
  */
-function unicodeArrow(side) {
-    let arrowChar;
+function arrowIcon(side) {
+    let rotation;
     switch (side) {
         case St.Side.TOP:
-            arrowChar = '\u25B4';
+            rotation = 180;
             break;
         case St.Side.RIGHT:
-            arrowChar = '\u25B8';
+            rotation = - 90;
             break;
         case St.Side.BOTTOM:
-            arrowChar = '\u25BE';
+            rotation = 0;
             break;
         case St.Side.LEFT:
-            arrowChar = '\u25C2';
+            rotation = 90;
             break;
     }
 
-    return new St.Label({ text: arrowChar,
-                          style_class: 'unicode-arrow',
-                          accessible_role: Atk.Role.ARROW,
-                          y_expand: true,
-                          y_align: Clutter.ActorAlign.CENTER });
+    let gicon = new Gio.FileIcon({ file: Gio.File.new_for_path(global.datadir +
+                                             '/theme/menu-arrow-symbolic.svg') });
+
+    let arrow = new St.Icon({ style_class: 'popup-menu-arrow',
+                              gicon: gicon,
+                              accessible_role: Atk.Role.ARROW,
+                              y_expand: true,
+                              y_align: Clutter.ActorAlign.CENTER });
+
+    arrow.rotation_angle_z = rotation;
+
+    return arrow;
 }
 
 const PopupBaseMenuItem = new Lang.Class({
@@ -993,7 +1000,7 @@ const PopupSubMenuMenuItem = new Lang.Class({
                                      y_align: Clutter.ActorAlign.CENTER });
         this.actor.add_child(this.status);
 
-        this._triangle = unicodeArrow(St.Side.RIGHT);
+        this._triangle = arrowIcon(St.Side.RIGHT);
         this._triangle.pivot_point = new Clutter.Point({ x: 0.5, y: 0.6 });
 
         this._triangleBin = new St.Widget({ y_expand: true,

diff --git a/js/ui/status/accessibility.js b/js/ui/status/accessibility.js
index 1ed9bf62bc8df5fb7ab0d5cd0fe2d0b4075b25f9..56f821180149e2ae1def1f21f40eb3d86e6ae6ca 100644 (file)
--- a/js/ui/status/accessibility.js
+++ b/js/ui/status/accessibility.js
@@ -44,7 +44,7 @@ const ATIndicator = new Lang.Class({
         this._hbox = new St.BoxLayout({ style_class: 'panel-status-menu-box' });
         this._hbox.add_child(new St.Icon({ style_class: 'system-status-icon',
                                            icon_name: 'preferences-desktop-accessibility-symbolic' }));
-        this._hbox.add_child(PopupMenu.unicodeArrow(St.Side.BOTTOM));
+        this._hbox.add_child(PopupMenu.arrowIcon(St.Side.BOTTOM));
 
         this.actor.add_child(this._hbox);
 

diff --git a/js/ui/status/keyboard.js b/js/ui/status/keyboard.js
index 8d9960ee1248706ec12de95affa3abfcf3ba7244..8d6242da253893f3f82c5731db41785c68cc0cf0 100644 (file)
--- a/js/ui/status/keyboard.js
+++ b/js/ui/status/keyboard.js
@@ -341,7 +341,7 @@ const InputSourceIndicator = new Lang.Class({
 
         this._hbox = new St.BoxLayout({ style_class: 'panel-status-menu-box' });
         this._hbox.add_child(this._container);
-        this._hbox.add_child(PopupMenu.unicodeArrow(St.Side.BOTTOM));
+        this._hbox.add_child(PopupMenu.arrowIcon(St.Side.BOTTOM));
 
         this.actor.add_child(this._hbox);
         this.actor.add_style_class_name('panel-status-button');